import React from 'react';
import Cubox from '../cubic-ui/cubox';
import styles from './FormInput.module.css'; // Assume you have a CSS module for input styles
import colorScheme from '../cubic-ui/color-scheme'; // Assume colorScheme is defined and imported

const FormInput = ({
  value = '',
  onChange,
  isDisabled = false,
  type = 'text',
  color = 'blue',
  children,
  style = {},
  delimiter,
  cornerRadius = 20,
  strokeWidth = 1,
  label,
  name,
  required = false,
  error,
  ...props
}) => {
  const [back, fore] = isDisabled
    ? ['base01', 'base01']
    : [color, 'base00'];

  const QBOXProps = {
    style,
    cornerRadius,
    strokeWidth,
    isOutlined: true,
    backColor: colorScheme[back],
    foreColor: colorScheme[fore],
  };

  const inputProps = {
    spellCheck: false,
    value,
    onChange,
    className: `${styles['input']} ${styles[`input-${type}`]}`,
    style: {
      color: colorScheme['base06'],
      background: 'transparent',
      border: 'none',
      outline: 'none',
      width: '100%',
      ...props.style,
    },
    type,
    disabled: isDisabled,
    name,
    required,
    ...props
  };

  return (
    <div className={styles['form-input-wrapper']} style={{ width: '100%' }}>
      {label && (
        <label className="block text-sm font-medium text-gray-700 mb-2">
          {label} {required && '*'}
        </label>
      )}
      <Cubox {...QBOXProps}>
        <div style={{ width: '100%' }}>
          <input {...inputProps} />
          {children}
        </div>
      </Cubox>
      {error && (
        <p className="mt-1 text-sm text-red-600">{error}</p>
      )}
    </div>
  );
};

export default FormInput; 